<script>
	import Vue from 'vue';
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		connectSocket
	} from '@/api/websocket.js'
	export default {
		/* watch: {
			$route(newVal) {
				console.log("newVal: ", newVal);
				let index = this.tabBar.findIndex((item, index) => (item.pagePath) === newVal.path)
				this.curIndex = index === -1 ? 0 : index
			}
		}, */
		computed: {
			...mapState({
				appIsLoading: state => state.app.appIsLoading,
				theme: state => state.app.theme,
				userInfo: state => state.app.userInfo
			})
		},
		onLaunch: function() {
			console.log('onLaunch');
			// ws的连接需要方法api接口请求之前
			connectSocket()
			// 页面刷新 重新请求用户信息 更新vip等级等 
			this.getUserInfo()
			this.getSystemInfo()
			this.registerResize()
			uni.hideTabBar()
			console.log('App Show')
			uni.$on('userinfo', (e) => {
				console.log("userinfo--->>>用户信息变更了: ", e);
				// 更新用户余额
				this.saveUserMoney(e.money);
				// 更新用户等级信息
				const userInfo = {
					...this.userInfo,
					level: {
						...this.userInfo.level,
						grade: e.level
					}
				}
				this.saveUserInfo(userInfo)
			})

			// APP端清理后台后重新进入应用，页面显示首页，更新高亮下标
			// #ifdef APP-PLUS
			this.saveActiveTab(0)
			uni.setStorageSync('curMenuPagePath', '/pages/tabBar/home/index');
			// #endif
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			...mapActions('app', ['getUserInfo']),
			...mapMutations('app', ['saveUserMoney', 'saveAppIsLoading', 'saveDepositOrderInfo', 'saveWindowSize',
				'saveDeviceType', 'saveActiveTab', 'saveUserInfo'
			]),
			getSystemInfo() {
				uni.getSystemInfo({
					success: (res) => {
						const {
							windowWidth, //屏幕宽度
							windowHeight, //屏幕高度
							deviceType //设备类型
						} = res
						console.log('getSystemInfo : ', res);
						// 首次编译的时候就确定设备类型phone、pad、pc、unknow，不用在每个页面中都使用媒体查询组件（页面会闪一下）
						this.saveDeviceType(deviceType)
						console.log('deviceType: ', deviceType);
						// #ifndef MP
						Vue.prototype.StatusBar = res.statusBarHeight;
						if (res.platform === 'android') {
							Vue.prototype.CustomBar = res.statusBarHeight + 50;
						} else {
							Vue.prototype.CustomBar = res.statusBarHeight + 43;
						}
						// #endif
						this.saveWindowSize({
							windowWidth,
							windowHeight
						})
					},
				});
			},

			registerResize() {
				// #ifdef H5
				console.log(window.location.pathname);
				if (window.location.pathname == '/pages/auth/auth') return
				// #endif
				uni.onWindowResize((res) => {
					const {
						windowWidth,
						windowHeight
					} = res.size
					this.saveWindowSize({
						windowWidth,
						windowHeight
					})
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "@/static/iconfont.css";
	@import '@/uni_modules/uni-scss/index.scss';
	/* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */
	@import './common/uni.css';
	// 主题相关
	@import '@/static/css/theme.css';

	/* H5 兼容 pc 所需 */
	/* #ifdef H5 */
	@media screen and (min-width: 768px) {
		body {
			overflow-y: hidden;
		}

		body::-webkit-scrollbar {
			display: none;
		}
	}

	.page-content-bg {
		background: var(--bg-3);
		transition: all .3s ease;
	}

	uni-left-window {
		overflow-x: inherit !important;
		flex-shrink: 0;
	}

	uni-page-body {
		min-height: 100vh !important;
	}

	.uni-top-window uni-tabbar .uni-tabbar {
		background-color: #071d2a !important;
	}

	.uni-app--showleftwindow .hideOnPc {
		display: none !important;
	}

	/* #endif */

	* {

		box-sizing: border-box;
	}

	/* 整个滚动条. */
	::-webkit-scrollbar {
		width: 2px;
	}

	/*  滚动条轨道 */
	::-webkit-scrollbar-track {
		background-color: transparent;
	}

	/*  滚动条上的滚动滑块 */
	::-webkit-scrollbar-thumb {
		border-radius: 6px;
	}
</style>